<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="pageQueryBoxArea mb10">
				<el-form :model="state.param" :inline="true">
					<el-form-item label="类型：">
						<el-select v-model="state.param.couponBaseType" placeholder="请选择类型" clearable>
							<el-option label="全部" :value=null />
							<el-option label="满减券" :value=0 />
							<el-option label="折扣券" :value=1 />
						</el-select>
					</el-form-item>
					<el-form-item label="使用状态：">
						<el-select v-model="state.param.status" placeholder="请选择状态" clearable>
							<el-option label="全部" :value=null />
							<el-option label="已使用" :value=1 />
							<el-option label="未使用" :value=0 />
							<el-option label="已过期" :value=2 />
						</el-select>
					</el-form-item>
					<el-form-item label="领取人：">
						<el-select v-model="state.param.uid" filterable remote reserve-keyword
							placeholder="请输入用户名或ID" :remote-method="remoteMethod">
							<el-option v-for="item in state.useList" 
								:key="item.userId" :label="item.nickName" :value="item.userId">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="名称搜索：">
						<el-input v-model="state.param.couponName" placeholder="请输入关键字搜索" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Search />
							</el-icon>
							搜 索
						</el-button>
						<el-button type="primary" @click="search()">
							<el-icon>
								<ele-Refresh />
							</el-icon>
							重 置
						</el-button>
					</el-form-item>
				</el-form>
			</el-card>
			<el-card shadow="hover" style="display: flex; flex-direction: column; flex: 1; height: inherit">
				<section style="display: flex; flex-direction: column; flex: 1; height: inherit">
					<el-table :data="state.tableData">
						<el-table-column prop="couponRecordId" label="ID" width="90" />
						<el-table-column prop="couponName" label="优惠券名称" show-overflow-tooltip></el-table-column>
						<el-table-column label="领取人" show-overflow-tooltip>
							<template #default="scope">
								<div style="display: flex;justify-content:center;align-items: center;">
									<el-image style="width:32px;height: 32px;margin-right:5px;" :src="scope.row.avatar" fit="cover" />
									<span>{{ scope.row.nickname}}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="面值" show-overflow-tooltip>
							<template #default="scope">
								<span v-if="scope.row.couponBaseType == 0">￥{{ scope.row.couponValue }}元</span>
								<span v-if="scope.row.couponBaseType == 1">{{ scope.row.couponValue }}折</span>
							</template>
						</el-table-column>
						<el-table-column prop="couponMinPrice" label="最低消费金额" show-overflow-tooltip>
							<template #default="scope">
								<span v-if="scope.row.couponMinPrice == 0">不限制</span>
								<span v-else>￥{{ scope.row.couponMinPrice }}元</span>
							</template>
						</el-table-column>
						<el-table-column label="开始使用时间" show-overflow-tooltip>
							<template #default="scope">
								<span> {{ formatDate(new Date(scope.row.couponStartTime), 'YYYY-mm-dd') }}</span>
							</template>
						</el-table-column>
						<el-table-column label="结束使用时间" show-overflow-tooltip>
							<template #default="scope">
								<span> {{ formatDate(new Date(scope.row.couponEndTime), 'YYYY-mm-dd ') }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="couponUseTypeName" label="获取方式" show-overflow-tooltip></el-table-column>
						<el-table-column label="是否可用">
							<template #default="scope">
								<el-switch disabled=true v-model="scope.row.couponIsUse" :active-value="1" :inactive-value="0" />
							</template>
						</el-table-column>
						<el-table-column label="状态">
							<template #default="scope">
								<span>{{scope.row.couponStatusName}}</span>
							</template>
						</el-table-column>
						<template #empty>
							<el-empty description="暂无数据" />
						</template>
					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
								:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
								v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
								:total="state.total">
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
		</div>
	</div>
</template>

<script setup lang="ts" name="saleIndex">
import { reactive,onMounted} from 'vue';
import { useRouter } from 'vue-router';
import { formatDate } from '/@/utils/formatTime';
import type { saleOrderListData } from "/@/types/marketing";
import { couponReceiveList } from '/@/api/marketing';
import { tuserSeacrh } from '/@/api/common';
import { ElMessageBox, ElMessage } from 'element-plus';
// 引入组件


const router = useRouter();
// 定义变量内容
const state = reactive({
	param: {
		couponBaseType: null,
		status:null,
		uid:'',
		couponName: "",
		pageNum: 1,
		pageSize: 10,  //这样就可以了， 但是这个不是自动切换得嘛 上面绑定了值

	},
	useList:[] as Array<any>,
	query: {
		orderStatus: [
			{ value: 0, label: '进行中' },
			{ value: 2, label: '已过期' },
			{ value: 3, label: '已删除' }
		],
	},
	loading: false,
	total: 0,
	tableData: [] as Array<saleOrderListData>
});

onMounted(() => {
	getOrderList();
})

// 获取订单列表
const getOrderList = async () => {
	state.loading = true;//不用传参， 请求得入参在上面都定义了 param这里吗？
	// 对
	const { results } = await couponReceiveList(state.param);
	state.loading = false;
	state.tableData = results.records;
	state.total = results.total;
}

const remoteMethod = async (query) => {
	if (query !== '') {
		const { results } = await tuserSeacrh({keywords:query});
		state.useList = results.records
	} else {
		status.useList = [];
	}
}

// 搜索
const search = () => {
	state.param.pageNum = 1;
	getOrderList()
}


// 分页点击 条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
	getOrderList();
};
// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
	getOrderList();
};

</script>
<style scoped lang="scss">

.contentBox{
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	align-items: flex-start;
	background-color: var(--el-color-info-light-9);
	// border:1px solid #
	// box-shadow:0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
	height: 120px;
	border-radius: 3px;
	padding-left: 10px;
	overflow: hidden;
	cursor: pointer;
	color: var(--el-text-color-regular);
	.personal-recommend {
		width: 100%;
		height: 90px;
		display: flex;
		align-items: center;
		.personal-recommend-auto {
			display: flex;
			width:100%;
			flex-direction: column;
			align-items: start;
			padding-top:15px;
			div{
				font-family: 'CUTI';
				text-align: center;
				width:100%;
			}
		}
	}
}

:deep(.el-card__body) {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;
	.el-table {
		flex: 1;
		.el-table__inner-wrapper::before {
			background: none !important;
		}
	}
}
</style>
